<template>
  <view class="content">
    <view class="title flexb">
      <view class="title_left f26">出库商品明细</view>
      <view class="title_right flexb f26">
        <view >总计：
          <text >￥{{ list.reduce( (prev, item) => prev * 1 + item.menu_all_price * 1,0) | number_format(2)}}
          </text>
        </view>
        <view class="material-ratio f24 flexc tc ml10" @click="goMaterials">查看材料配比</view>
      </view>
    </view>
    <view class="list_box">
      <view class="list_item f28 mb20" v-for="(item, index) in list" :key="index">
        <view class="list_item_title flexb">
          <view class="name flexAI f28 fwbold">
            <view class="point br50 mr10"></view>
            <view>品名：{{ item.goods_name }}</view>
          </view> 
          <view class="details f24" @click="details(item)"> 详情<van-icon name="arrow-down" /></view>
        </view>
        <view class="type-number flexb">
          <view> 使用类型：{{ item.use_type_name }}</view>
          <view> 数量：{{ item.menu_stock }}</view>
        </view>
        <view class="flexb dishname-price">
          <view @click="goMenuDetails(item)"> 包含菜名：<text class="text-goodName">{{ item.menu_foods_name }} </text></view>
          <view style="width: 25%;"> 单价：<text class="txt-color">{{ item.menu_goods_price }}</text></view>
        </view>
        <view class="flexb">
          <view> 合计：<text class="txt-color">￥{{ item.menu_all_price }}</text> </view>
        </view>
      </view>
    </view>
    <!-- 查看原材料 -->
    <van-overlay :show="show">
      <view class="wrapper flexc">
        <view class="block f28">
          <scroll-view scroll-y="true" style="height: 950rpx;">
            <view class="title flexb">
            <view class="title-left f36 fwbold">材料配比</view>
            <view>
              <view class="icon" @click="offShow">
                <van-icon name="clear" color="#3E3D3D" size="20px" />
              </view>
            </view>
          </view>
          <view class="table">
            <view class="row disFlex back-color">
              <view class="item-style flexc">菜名</view>
              <view class="item-style flexc">品名</view>
              <view class="item-style flexc">数量</view>
              <view class="item-style flexc">单位</view>
            </view>
            <view class="row disFlex"  v-for="(item, index) in materialsList" :key="index" >
              <view class="item-style flexc">{{ item.goods_name }}</view>
              <view class="item-style flexc">{{ item.foods_name }}</view>
              <view class="item-style flexc">{{ item.goods_num }}</view>
              <view class="item-style flexc">{{ item.unit_name }}</view>
            </view>
          </view>
          </scroll-view>

        </view>
      </view>
    </van-overlay>
<!-- 详情弹框 -->
    <van-overlay :show="detailShow" lock-scroll="true" class="my-overlay">
      <view class="wrapper flexc">
        <view class="block f28">
          <view class="title flexb">
            <view class="title-left f36 fwbold">详情</view>
              <view class="icon" @click="offShow">
                <van-icon name="clear" color="#3E3D3D" size="20px" />
              </view>
          </view>
          <van-cell-group>
            <van-field
            :value="detailForm.menu_name"
            label="套餐名"
            readonly 
          ></van-field>
          <van-field
            :value="detailForm.use_type_name"
            label="使用类型"
            readonly 
          ></van-field>
          <van-field
            :value="detailForm.menu_stock"
            label="数量"
            readonly 
          ></van-field>
          <van-field
          class="baohan"
            :value="detailForm.menu_foods_name"
            label="包含"
            readonly 
          >
          <view slot="input" @click="gomaterials" class="text-goodName">
            {{ detailForm.menu_foods_name }} 
          </view>  
        </van-field>
          <van-field
            :value="detailForm.menu_goods_price"
            label="单价"
            readonly 
          >
          <view slot="input" class="txt-color">
            ￥{{ detailForm.menu_goods_price }}
          </view>  
        </van-field>
          <van-field
            :value="detailForm.unit_name"
            label="单位"
            readonly 
          ></van-field>
          <van-field
            :value="detailForm.menu_all_price"
            label="合计（元）"
            readonly 
          >
          <view slot="input" class="txt-color">
            ￥{{ detailForm.menu_all_price }}
          </view>  
        </van-field>
          </van-cell-group>
        </view>
      </view>
    </van-overlay>
      
  </view>
</template>

<script>
export default {
  props: ["childvalue",'getGoodInfos','list'],
  data() {
    return {
      form: {
        outbound_type: this.childvalue, //出库类型
        goods_info: [], //套餐信息列表
      },
      show:false,
      detailShow:false,
      detailForm : {},
      materialsList:[],
      details_menu_sn:"",//详情套餐编号
    };
  },
  onLoad() {},
  methods: {
    // 获取套餐信息
    // async getSetmealList() {
    //   let res = await this.$ajax.outZixuandetail({
    //     outbound_type: this.childvalue,
    //   });
    //   if (res.code == 1) {
    //     this.form.goods_info = res.data.menu;
        
    //   } else {
    //     uni.showToast({
    //       title: res.msg,
    //       icon: "none",
    //     });
    //   }
    // },
    // 查看材料配比
    async goMaterials(){
      this.show = true;
      this.form.goods_info=this.list
      console.log(this.form.goods_info,'form.goods_info---');
      let res = await this.$ajax.outCreategoodsmaterials({
        menu:this.form.goods_info
      })
      if (res.code == 1) {
        this.materialsList = res.data.allgoodslist
      }else{
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
        setTimeout(()=>{
          this.show = false;
        },1000)
       
      }
    },
    // 关闭
    offShow(){
      this.show = false;
      this.detailShow = false;
      
    },
    // 详情信息
    details(item){
      this.detailShow = true;
      this.detailForm = item;
      this.details_menu_sn = item.menu_sn;
    },

    // 包含菜品（菜品详情）
    goMenuDetails(item){
      console.log(item);
      uni.navigateTo({
            url: "../outboundManagement/menuDetails?menu_sn="+ item.menu_sn,
      });
    },
    gomaterials(){
      uni.navigateTo({
            url: "../outboundManagement/menuDetails?menu_sn="+ this.details_menu_sn,
      });
    }
  },
  mounted() {
      // this.getSetmealList(); //获取套餐信息列表数据
  },
};
</script>
 
<style lang="scss" scoped>
.baohan{
  ::deep.van-field__body {
    flex-wrap: wrap;
    height: 100rpx;
  }
}
.my-overlay {
  z-index: 9999; /* 设置一个较高的层级值 */
}
.flexb {
  display: flex;
  justify-content: space-between;
 
}
.del{
  .van-button{
    width: 120rpx;
    height: 55rpx;
    color: #d12312;
    border: 0.5rpx solid rgba(187, 187, 187, 1);
    border-radius: 60rpx;
    font-size: 24rpx; 
  }
}
.txt-color{
  color: red;
}
.van-field__body van-field__body--text{

}
.text-goodName{
  color: #2E88EE;
  width:380rpx;
  height:48rpx;
  line-height: 24rpx;
  font-size: 24rpx;
  .van-field__control--custom{
    width:380rpx;
  height:48rpx;
  line-height: 24rpx;
  font-size: 24rpx;
  }
}
.content {
  // min-height: 100vh;
  height: 100%;
  background: rgba(244, 244, 244, 1);
  .title {
    padding: 20rpx 30rpx;
    line-height: 40rpx;

    .title_left {
      color: rgba(153, 153, 153, 1);
      font-family: SourceHanSansSC-regular;
    }

    .title_right {
      color: rgba(153, 153, 153, 1);
      font-family: SourceHanSansSC-regular;

      text {
        color: red;
        font-weight: bold;
      }
      // 材料配比
      .material-ratio{
        border: 1px solid;
        color: white;
        background:#2E88EE;
        padding: 0rpx 10rpx;
      }
     
    }
  }
  .list_box {
    // height: 400rpx;
    .list_item {
      width: 100%;
      line-height: 55rpx;
      background-color: rgba(255, 255, 255, 1);
      color: rgba(16, 16, 16, 1);
      padding: 20rpx 20rpx;
      font-family: SourceHanSansSC-regular;

      .list_item_title {
        .name {
          color: rgba(16, 16, 16, 1);
          font-family: SourceHanSansSC-bold;

          .point {
            width: 15rpx;
            height: 15rpx;
            background: rgba(98, 177, 88, 1);
          }
        }
        .details {
          color: rgba(46, 136, 238, 1);
          font-family: SourceHanSansSC-regular;
        }
      }
      // 使用类型+ 数量
      .type-number {
      }
      // 菜名+单价
      .dishname-price {
        border-bottom: 0.5rpx solid #e7e4e4;
        padding-bottom: 20rpx;
      }

      .details_subtotal-box {
        display: flex;
        justify-content: space-between;
        padding-top: 20rpx;
        .van-button {
          width: 120rpx;
          height: 55rpx;
          color: #d12312;
          border: 0.5rpx solid rgba(187, 187, 187, 1);
          border-radius: 60rpx;
          font-size: 24rpx;
        }

        .subtotal {
          background-color: rgba(255, 255, 255, 1);
          color: rgba(209, 35, 18, 1);
          font-size: 28rpx;
          text-align: center;
          font-family: Arial;
          font-weight: bold;
        }
      }
    }
  }
  .btn-box{
    display: flex;
    justify-content: space-evenly;
    margin-top: 100rpx;
    padding-bottom: 60rpx;
    .van-button {
      width: 200rpx;
      height: 72rpx;
      border-radius: 8rpx;
      color: rgba(255, 255, 255, 1);
      font-size: 28rpx;
      text-align: center;
      font-family: Microsoft Yahei;
    }
  }
}

// 弹框
.wrapper{
  overflow: auto;
  .block{
    height: 990rpx;
    // overflow: auto;
    overflow-y: scroll;
    width: 100%;
    background-color: #fff;
    margin: 0 30rpx;
    border-radius: 16px;
    padding: 20rpx 20rpx;
    .title{
      .title-left{
      }
    }
    .table{
      width: 100%;
      .item-style{
        width: 25%;
        padding: 10px;
        word-break:break-all;
        // overflow-wrap: anywhere;
        border-right: 1px solid #ccc;
      }
      .row{
        border: 1px solid #ccc;
      }
      .back-color{
        background: #cdcccc;
      }
    }
  }
}
</style>